<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>

<div id="container">
    <div id="header">
        <h1 style="margin-bottom:0;">这是个标题</h1></div>
    <div id="menu" style="float:left;"></div>
    <div id="content" style="height:450px;width:800px;float:left;">
        <video id="player" width="100%" height="100%" controls preload="auto">
            <source id="source" src="" type="video/mp4">
        </video>
        <div id="episode"></div>
    </div>
</div>

<script type="text/javascript">
    let pathBase = "http://45.32.27.235:8080/"
    //let pathBase = "http://localhost:8080/"
    let video = [];
    getAllSortAndEpisode()
    setTimeout(() => {
        init()
    }, 300)

    function getAllSortAndEpisode() {
        $.ajax({
            type: "Get",
            url: pathBase + "getAllSortAndEpisode",
            success: function (data) {
                for (let i in data) {
                    video.push(data[i])
                }
            }
        })
    }

    function init() {
        for (let i in video) {
            $("#menu")
                .append("<button style='width: 200px;height: 20px' onclick='play(\"" + video[i].name + "\", \"" + video[i].episode[0] + "\")'>" + video[i].name + "</button>")
                .append("<br/>")
        }
    }

    function play(name, episode) {
        document.getElementById("player").src = pathBase + "video/" + name + "/" + episode;
        document.getElementById("player").play();
        $("#episode").html('')
        for (let i in video) {
            if (name === video[i].name) {
                for (let j in video[i].episode) {
                    $("#episode").append("<button style='width: 80px;height: 20px' onclick='play(\"" + name + "\", \"" + video[i].episode[j] + "\")'>" + video[i].episode[j] + "</button>")
                }
            }
        }
    }
</script>
</body>
</html>